<template>
    <div class="noteshelf">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="220px" style="background-color: #e9d7df">
                <el-menu @select="selected" :default-openeds="['1']" :default-active="defaultActive"
                         background-color="#e9d7df" active-text-color="#5cb3cc">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-folder"></i>我的笔记</template>
                        <el-menu-item v-for="item in noteCategory" :index="item.cname">
                            <i class="el-icon-notebook-2"></i>{{item.cname}}
                            <el-button style="float: right;height: 50px;margin-right: -30px" type="text"
                                       @click="preDeleteCategory(item)" icon="el-icon-close"></el-button>
                            <el-button style="float: right;height: 50px;" type="text"
                                       @click="preEditCategory(item)" icon="el-icon-edit"></el-button>
                        </el-menu-item>
                        <el-menu-item index="" @click="addCategoryDialogFormVisible = true">
                            <i class="el-icon-plus"></i>添加类别
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-delete"></i>
                        <span slot="title">回收站</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!--添加类别-->
            <el-dialog title="添加笔记类别" :visible.sync="addCategoryDialogFormVisible" width="420px">
                <el-form :model="categoryForm">
                    <el-form-item label="类别名称" :label-width="formLabelWidth">
                        <el-input v-model="categoryForm.cname" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addCategoryDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCategory">确 定</el-button>
                </div>
            </el-dialog>
            <!--修改类别-->
            <el-dialog title="修改笔记类别" :visible.sync="editCategoryDialogFormVisible" width="420px">
                <el-form :model="editCategoryForm">
                    <el-form-item label="类别名称" :label-width="formLabelWidth">
                        <el-input v-model="editCategoryForm.cname" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editCategoryDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editCategory">确 定</el-button>
                </div>
            </el-dialog>
            <!--删除类别-->
            <el-dialog title="确定永久删除该类别？" :visible.sync="deleteCategoryDialogFormVisible" width="420px">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="deleteCategoryDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteCategory">确 定</el-button>
                </div>
            </el-dialog>

            <el-container>
                <el-header style="text-align: left; font-size: 16px; font-weight: bolder">
                    <span>当前用户：{{$store.state.currentUser.username}}</span>
                </el-header>
                <el-main>
                    <Note v-for="note in notes" :note="note"></Note>
                    <!--添加Note-->
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span style="font-weight: bolder; font-size: 15px">添加笔记</span>
                        </div>
                        <div class="item">
                            <el-button @click="dialogFormVisible = true" type="text"
                                       icon="el-icon-circle-plus-outline"></el-button>
                        </div>
                    </el-card>
                    <!--        添加标题及简介-->
                    <el-dialog title="笔记标题及简介" :before-close="handleAddClose" :visible.sync="dialogFormVisible"
                               width="420px">
                        <el-form :model="form">
                            <el-form-item label="笔记标题" :label-width="formLabelWidth">
                                <el-input v-model="form.nname" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="笔记简介" :label-width="formLabelWidth">
                                <el-input type="textarea" v-model="form.ndesc"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addNote">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Note from "./Note";

    export default {
        components: {Note},
        comments: {
            Note
        },
        data() {
            return {
                defaultActive: '',
                noteCategory: [],
                userName: '',
                deleteCategoryId: 0,
                addCategoryName: '',
                notes: [],
                editCategoryForm: {},
                categoryForm: {
                    cname: '',
                    userName: ''
                },
                form: {
                    nname: '',
                    ndesc: '',
                    userName: '',
                    categoryName: ''
                },
                dialogFormVisible: false,
                deleteCategoryDialogFormVisible: false,
                editCategoryDialogFormVisible: false,
                addCategoryDialogFormVisible: false,
                formLabelWidth: '80px'
            }
        },
        methods: {
            addCategory() {
                this.categoryForm.userName = this.userName
                const _this = this
                axios.post('http://localhost:2020/note/category/add', this.categoryForm).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.addCategoryDialogFormVisible = false
                        window.location.reload()
                    }
                })
            },
            preEditCategory(category) {
                this.editCategoryForm = JSON.parse(JSON.stringify(category))
                this.editCategoryDialogFormVisible = true
            },
            preDeleteCategory(category) {
                this.deleteCategoryId = category.cid
                this.deleteCategoryDialogFormVisible = true
            },
            editCategory() {
                const _this = this
                axios.put('http://localhost:2020/note/category/edit',this.editCategoryForm).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.editCategoryDialogFormVisible = false
                        window.location.reload()
                    }
                })
            },
            deleteCategory() {
                const _this = this
                axios.delete('http://localhost:2020/note/category/delete/'+this.deleteCategoryId).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.deleteCategoryDialogFormVisible = false
                        window.location.reload()
                    }
                })
            },
            selected(categoryName) {
                this.form.categoryName = categoryName
                this.getNotes(categoryName)
            },
            handleAddClose(done) {
                this.$confirm('保存并添加？')
                    .then(_ => {
                        this.addNote()
                        done();
                    })
                    .catch(_ => {
                    });
            },
            addNote() {
                if (this.form.categoryName === '') {
                    this.form.categoryName = this.defaultActive
                }
                this.form.userName = this.userName
                const _this = this
                axios.post('http://localhost:2020/note/notes/add', this.form).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.dialogFormVisible = false
                        window.location.reload()
                    }
                })
            },
            getNotes(categoryName) {
                const _this = this
                axios.get('http://localhost:2020/note/notes/' + this.userName + '/' + categoryName)
                    .then(function (res) {
                        if (res.data.status === 200) {
                            _this.notes = res.data.object
                        }
                    })
            }
        },
        mounted() {
            this.userName = this.$store.state.currentUser.username
            const _this = this
            axios.get('http://localhost:2020/note/category/' + this.userName)
                .then(function (res) {
                    if (res.data.status === 200) {
                        _this.noteCategory = res.data.object
                        _this.defaultActive = _this.noteCategory[0].cname
                        _this.getNotes(_this.defaultActive)
                    }
                })
        }
    };
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #e9d7df;
    }

    .el-menu {
        text-align: left;
    }

    .el-main {
        display: flex;
        flex-wrap: wrap;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 300px;
        height: 165px;
        text-align: left;
    }

    .item {
        text-align: center;
    }

    .item > .el-button {
        font-size: 45px;
    }

</style>

